<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib tagdir="/WEB-INF/tags/" prefix="util" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="core" %>
<%@taglib tagdir="/WEB-INF/tags/" prefix="pasta" %>
<util:template titulo="Acervo">
    <div class="col-md-12">
        <div id="splitter">

            <div id='jqxWidget'>
                <div style="border: none;" id='jqxTree'>
                    <ul>
                        <li id="home" item-expanded='true' item-selected='true'>
                            <img style='float: left; margin-right: 5px;' src='assets/images/folder.png' /><span
                                item-title="true">Reposit&oacute;rio</span>
                            <pasta:pasta pastas="${pastas}"/>
                        </li>
                    </ul>
                </div>               
            </div>

            <div>
                <div class="panel-title">
                    <input id="arquivo" type="file"/>
                    <button id="upload" value="Upload">Upload</button>                   
                </div>
                <div id="ContentPanel"  class="bs-docs-section">
                </div>            
            </div>
        </div>
        <link rel="stylesheet" href="assets/css/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="assets/css/docs.css" type="text/css" />
        <script type="text/javascript" src="assets/scripts/gettheme.js"></script>
        <script type="text/javascript" src="assets/scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="assets/js/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="assets/js/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="assets/js/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="assets/js/jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="assets/js/jqwidgets/jqxtree.js"></script>
        <script type="text/javascript" src="assets/js/jqwidgets/jqxexpander.js"></script>
        <script type="text/javascript" src="assets/js/jqwidgets/jqxsplitter.js"></script>
        <script type="text/javascript" src="assets/js/jqwidgets/jqxmenu.js"></script>    
        <script type="text/javascript" src="assets/js/jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="assets/js/jqwidgets/jqxmenu.js"></script>

        <script type="text/javascript">
            
            function atualiza(codigo){
                    $.ajax({
                        type: "POST",
                        url: "intranet/acervo/listarArquivo",
                        dataType: "json",
                        data: {id: codigo}
                    })
                    .done(function(msg) {
                        html = "<ul class='bs-glyphicons'>";
                        for (x = 0; x < msg.result.length; x++) {
                            html += "<li>"
                                + "<div>"
                                + "<span class='glyphicon glyphicon-file'></span>"
                                + "<span class='glyphicon-class'>" + msg.result[x].nome + "</span>"
                                + "</div>"
                                + "<div><input type='checkbox' id=file" + msg.result[x].id + "></div>"
                                + "</li>";
                        }
                        html += "</ul>";                                
                        $("#ContentPanel").html(html);
                    });
            }
            $(document).ready(function() {
                var theme = getDemoTheme();
                // Create jqxTree
                $("#splitter").jqxSplitter({theme: theme, width: '100%', height: 400, panels: [{size: 250}]});
                $('#jqxTree').jqxTree({theme: theme, height: '100%', width: '100%'});
                $('#jqxTree').on('select', function(event) {
                    atualiza($(event.args.element).attr('id'));
                });

            });
            
            $(document).on("click", "#upload", function() {
                var file_data = $("#arquivo").prop("files")[0];   // Getting the properties of file from file field
                var form_data = new FormData();                  // Creating object of FormData class
                form_data.append("file", file_data);              // Appending parameter named file with properties of file_field to form_data
                form_data.append("id", $('#jqxTree').jqxTree('getSelectedItem').id);
                
                $.ajax({
                    url: "intranet/acervo/carrega",
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: form_data,
                    // Setting the data attribute of ajax with file_data
                    type: 'post'                    
                })
                    .done(function(msg) {
                        atualiza($('#jqxTree').jqxTree('getSelectedItem').id);
                    });
                
            });           
        </script>
    </util:template>